<template>
    <div class="stock">
      <div class="stock-header" >
        <van-row>
          <van-col span="12" class="stock-top" style="">
            <van-button  type="default"   style="width:100%;background: #fff;border-radius: 0!important;" @click="show=true">选择店仓<i class="iconfont icon-xia"></i></van-button>
          </van-col>
          <van-col span="12" class="stock-top">
            <van-button  type="default"  style="width:100%;background: #fff;border-radius: 0!important;" @click="searchShow=true">搜索<i class="iconfont icon-xia"></i></van-button>
          </van-col>
        </van-row>
      </div>
      <!--店仓弹出层-->
      <van-popup v-model="show" @click-overlay="result=resultPrev"  :overlay="true" class="stock-mask">

        <div class="stockList" style="overflow: scroll;height:87%;margin-bottom:10px;">
          <div v-if="typeof stores=='string'" style="color:#ddd;padding:10px 0;font-size:16px;">{{stores}}</div>
          <van-checkbox-group v-else v-model="result">
            <van-cell-group>
              <van-cell style="text-align: left;"  clickable v-for="(item,index) in stores" :title="` ${item.name}`" :key="index" >
                <van-checkbox v-if="item.status" disabled="true" :name="item.id" ref="checkboxes"/>
                <van-checkbox v-else  :name="item.id" @change="getDcFn" ref="checkboxes"/>
              </van-cell>
            </van-cell-group>
          </van-checkbox-group>

        </div>

        <!--按钮-->
        <van-row style="margin-top: -12px;">
          <van-col span="8" style="padding:0 10px;">
            <van-button class="stock-maskbtn"  @click="resetFn">重置</van-button>
          </van-col>
          <van-col span="8" style="padding:0 10px;">
            <van-button  class="stock-maskbtn" @click="closeDcFn">取消</van-button>
          </van-col>
          <van-col span="8" style="padding:0 10px;">
            <van-button  type="primary"  class="stock-maskbtn" @click="getDcFn">确定</van-button>
          </van-col>
        </van-row>
      </van-popup>

      <!--搜索弹出层-->
      <van-popup v-model="searchShow"   :overlay="true" class="stock-maskss" style="">
        <p class="ss-titme" style="">搜索商品</p>
        <van-cell-group style="margin:5% 3%;">
          <van-field style="border:1px solid #ddd;border-radius:5px;"  v-model="searchValue" placeholder="请输入商品信息"  @keyup.enter="getSearchValue"/>
        </van-cell-group>

        <!--按钮-->
        <van-row >
          <van-col span="8" style="padding:0 10px">
            <van-button  class="stock-maskbtn"  @click="searchValue=''">清空</van-button>
          </van-col>
          <van-col span="8" style="padding:0 10px">
            <van-button  class="stock-maskbtn"  @click="searchShow=false">取消</van-button>
          </van-col>
          <van-col span="8" style="padding:0 10px">
            <van-button  type="primary" :disabled="btnStaus"  class="stock-maskbtn" @click="getSearchValue">搜索</van-button>
          </van-col>
        </van-row>

      </van-popup>

      <!--商品列表部分-->
      <div class="stock-content">

        <van-list
          v-model="loading"
          :finished="finished"
          @load="getGoodsList"
        >
          <div v-if="typeof goodsList=='string'" style="color:#ddd;padding:10px 0;background: #fff;">{{goodsList}}</div>
          <van-row v-else style="padding:1% 0;margin:5px 0;background: #fff;border: 1px solid #f5f5f5;
    border-radius: 3px;" v-for="(val,index) in goodsList" :key="index">
            <van-col span="6" >
              <img @click="showGoodsImgFn(val.item.images)" v-if="val.item.images.length>0" class="stock-img"  :src="memberDetails.imgaes+val.item.images" alt="">

              <img v-else  class="stock-img" @click="showGoodsImgFn(val.item.images)"  src="../../images/noimg.jpg" alt="">
            </van-col>



            <van-col offset="1" span="17" style="padding:5px;margin-bottom:5px;text-align: left">
              <van-row style="padding:3px 0;">
                <van-col span="24">
                  店仓:
                  <span v-if="backDCName(val.store_id).name.length==0" style="color:#ddd">暂无店仓</span>
                  <span v-else >{{backDCName(val.store_id).name}}</span>
                </van-col>
              </van-row>
              <van-row style="padding:3px 0;">
                <van-col span="24" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                  商品: {{val.item.title}}
                </van-col>
              </van-row>
              <van-row style="padding:3px 0;">
                <van-col span="24" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                  规格:【<span v-for="(key,v) in val.item.spec_data">{{v}}:{{key}} </span>】
                </van-col>
              </van-row>

              <van-row style="padding:3px 0;">
                <van-col span="24" >
                  <van-row>
                    <van-col span="24">货号: {{val.item.sn?val.item.sn:'暂无货号'}}</van-col>
                  </van-row>

                  <van-row style="padding:3px 0;">
                    <van-col span="12">库存:<span :style="{color:color}">{{val.real_num}}</span></van-col>
                    <van-col span="12"><span :style="{color:color}" style="font-weight: bold">￥{{val.item.price}}</span></van-col>
                  </van-row>
                </van-col>

              </van-row>



            </van-col>
          </van-row>
          <div class="noDatas" :style="{display:block}">
            数据已加载完
          </div>
        </van-list>

      </div>


      <!--图片弹出层-->
      <van-popup class="imgPopups" v-model="showGoodsImg" style="width:320px;height:398px;">
        <img v-if="showGoodsImgPath!=0" style="width:100%;height:100%;display: block" @click="showGoodsImg=false"  :src="showGoodsImgPath" alt="">
        <img v-else src="../../images/noimg.jpg" @click="showGoodsImg=false" style="width:100%;height:100%;" alt="">
      </van-popup>



      <!--返回按钮-->
      <backs></backs>

      <!--底部-->
      <van-row class="stock-footer" @touchstart="showBottom" @touchend="closeBottom">
        <van-col span="24">总条数 <span :style="{color:color}">{{stockNum}}</span>数</van-col>
        <div class="stock-hover" :style="{display:stockShow}">9999</div>
      </van-row>
      <!--权限遮罩-->
      <div class="zhez" v-if="zhez"></div>
    </div>
</template>

<script>

  import { mapState } from 'vuex';
  import backs from "@/components/menu/backPrev";

    export default {
        name: "stock",
        components:{
          backs
        },
        computed: {
          ...mapState({
            memberDetails:"data"
          })
        },
        data () {
          return {
            color:'#0D90EB!important',//主题色，字体色
              btnStaus:false,
              block:"none",
              currentPage:1,
              pageSize:20,//每页显示条数
              total:0,//总页数
              show:false,
              searchShow:false,
              stores:[],//存店铺
              checked: false,

              result: [],//复选框的值
              resultPrev:[],//记录值

              searchValue:"",//搜索的值
              searchValuePrev:"",//上一次搜索值
              searchstatus:0,
              goodsList:[],//商品信息
              stockNum:0,//库存
              goodsType:0,//种类（多少款项）
              showGoodsImg:false,
              showGoodsImgPath:"",

              onFetching: false,
              bottomCount: [],

            //滚动加载
            loading: false,
            finished: false,

            stockShow: 'none',
            zhez: false
          }
        },
        methods:{
          toggle(index) {
            this.$refs.checkboxes[index].toggle();
          },
          showBottom(){
            this.stockShow= "block";
          },
          closeBottom(){
            this.stockShow= "none";
          },
          //获取所有商品
          getGoodsList(){
            this.btnStaus = true
            var $this=this;
            this.$http.item.get('stock',{
              params:{
                store_ids:$this.result,
                keyword:$this.searchValuePrev,
                page:$this.currentPage,
                pagesize:$this.pageSize
              }
            })
              .then(function (response) {
                // console.log(response.data);
                var empId = localStorage.getItem('empId');
                if(!response.data.code){
                  //给库存赋值
                  $this.stockNum=response.data.data.list.total;
                  $this.currentPage=response.data.data.list.data.current_page+1;
                  for (let i = 0; i < response.data.data.list.data.length; i++) {
                    // $this.stockNum+=response.data.data.data[i].real_num

                    $this.goodsList.push(response.data.data.list.data[i]);
                  }

                  //memberDetails.imgaes+val.item.images

                  $this.loading = false;
                  // console.log(response.data.data.data);
                  if(!response.data.data.list.data.length){
                    $this.goodsList="未找到相关数据";
                    $this.finished = true;
                  }else if ($this.goodsList.length >= response.data.data.list.total) {
                    $this.finished = true;
                    $this.block = 'block'
                  }
                  $this.btnStaus = false
                }else if(empId&&response.data.code){
                  $this.$toast.fail('库存查询'+response.data.message);
                  $this.$router.go(-1)
                  return;
                }


              })
              .catch(function (error) {
                $this.$toast.fail('登陆过期，请重新登陆');
                console.log(error);
              });
          },
          //重置
          resetFn(){
            this.result=[]
          },
          //点击店仓确定按钮
          getDcFn(){
            this.block = 'none'
            this.show=false;
            this.resultPrev=this.result;
            this.goodsList=[];
            this.currentPage=1;
            this.loading=true;
            this.finished=false;
            this.getGoodsList();
          },
          // 关闭店仓
          closeDcFn(){
            this.show=false;
            this.result =this.resultPrev;
          },
          //传入店仓ID，返回店仓名
          backDCName(sId){
            var dc=this.stores.filter(i => i.id==sId);
            if(dc.length){
              return dc[0];
            }

            return {
              name:""
            }

          },
          //获取所有店仓
          getDianCang(){
            var $this=this;
            this.$http.setting.get('store')
              .then(function (response) {
                // console.log(response.data.data);
                var empId = localStorage.getItem('empId');
                if(empId&&response.data.code==403){
                  $this.$toast.fail('店仓'+response.data.message);
                  $this.$router.go(-1)
                  $this.zhez = true
                  return;
                }
                $this.zhez = false
                $this.stores=response.data.data.length>0?response.data.data:"暂无店仓";
                // $this.stores=response.data.data;

              })
              .catch(function (error) {
                console.log(error);
              });
          },
          //搜索输入框的值
          getSearchValue(){
            this.searchShow=false;
            this.searchValuePrev=this.searchValue;

            this.goodsList=[];
            this.currentPage=1;
            this.loading=true;
            this.finished=false;
            this.getGoodsList();
            // this.searchValue="";

          },
          //显示商品图片
          showGoodsImgFn(url){

            this.showGoodsImg=true;
            if(!url){
              this.showGoodsImgPath=0;
            }else{
              this.showGoodsImgPath=this.memberDetails.imgaes+url;
            }
          }
        },
      mounted(){
          this.getDianCang();

          // this.getGoodsList();
      }
    }
</script>

<style scoped>
  .stock .van-cell{
    border-bottom:1px solid #e5e5e5;
  }
  .stock .van-cell:first-child{
    /*border-top:1px solid #e5e5e5;*/
  }
  .stock [class*=van-hairline]::after{
    border:0;
  }

  .stock-header{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    background: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 999!important;
  }
  .stock-footer{
    position: fixed;
    bottom:0;
    left:0;
    border-top:1px solid #ddd;
    width:100%;
    font-size:12px;
    height:30px;
    line-height: 30px;
    background: #fff;
  }
  .stock-hover{
    display: none;
    position: absolute;
    top:-20px;
    left:20%;
    width:200px;
    padding:5px;
    border:1px solid;
  }
  .stock-content{
    margin-top:45px;
    margin-bottom:30px;
    font-size:14px!important;
    padding:5px;
    /*background: skyblue;*/
  }

  .imgPopups{
    background-color: initial!important;
  }
  .stock-top{
    line-height: 32px!important;
  }

  .stock-img{
    width:76px;height:110px;padding:10px 0;
  }
  .stock-mask{
    width:320px;height:426px;padding:10px 0;background: #fff!important;border-radius: 5px;
  }
  .stock-maskbtn{
    width:100%;height:38px;line-height: 38px;
  }
  .stock-maskss{
    width:320px;padding:10px 0;height:auto;background: #fff!important;border-radius: 5px;
  }
  .ss-titme{
    font-size:16px;color:#888
  }

  @media (min-width: 768px) {

    .stock-mask{
      width:320px;height:426px;padding:10px 0;background: #fff!important;border-radius: 5px;
    }
  }



  .zhez{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: #fff!important;
    z-index: 99999;
  }
</style>
